:root {
  // ========== common colors ==========
  --vp-c-white: #fff;
  --vp-c-black: #000;

  // grey
  --vp-c-grey-text: #656869;
  --vp-c-grey-hover: #e4e4e9;
  --vp-c-grey-bg: #ebebef;
  --vp-c-grey-soft: rgb(142 150 170 / 14%);

  // indigo
  --vp-c-indigo-text: #3451b2;
  --vp-c-indigo-hover: #3a5ccc;
  --vp-c-indigo-bg: #5672cd;
  --vp-c-indigo-soft: rgb(100 108 255 / 14%);

  // purple
  --vp-c-purple-text: #6f42c1;
  --vp-c-purple-hover: #7e4cc9;
  --vp-c-purple-bg: #8e5cd9;
  --vp-c-purple-soft: rgb(159 122 234 / 14%);

  // blue
  --vp-c-blue-text: #2888a7;
  --vp-c-blue-hover: #2d98ba;
  --vp-c-blue-bg: #2fa1c5;
  --vp-c-blue-soft: rgb(27 178 229 / 14%);

  // green
  --vp-c-green-text: #18794e;
  --vp-c-green-hover: #299764;
  --vp-c-green-bg: #30a46c;
  --vp-c-green-soft: rgb(16 185 129 / 14%);

  // yellow
  --vp-c-yellow-text: #915930;
  --vp-c-yellow-hover: #946300;
  --vp-c-yellow-bg: #c28100;
  --vp-c-yellow-soft: rgb(234 179 8 / 14%);

  // red
  --vp-c-red-text: #b8272c;
  --vp-c-red-hover: #d5393e;
  --vp-c-red-bg: #e0575b;
  --vp-c-red-soft: rgb(244 63 94 / 14%);
}

[data-theme='dark'] {
  --vp-c-white: #000;
  --vp-c-black: #fff;

  // grey
  --vp-c-grey-text: #939499;
  --vp-c-grey-hover: #414853;
  --vp-c-grey-bg: #32363f;
  --vp-c-grey-soft: rgb(101 117 133 / 16%);

  // indigo
  --vp-c-indigo-text: #a8b1ff;
  --vp-c-indigo-hover: #5c73e7;
  --vp-c-indigo-bg: #3e63dd;
  --vp-c-indigo-soft: rgb(100 108 255 / 16%);

  // blue
  --vp-c-blue-text: #c9e8f2;
  --vp-c-blue-hover: #a6d9ea;
  --vp-c-blue-bg: #2785a3;
  --vp-c-blue-soft: rgb(27 178 229 / 16%);

  // purple
  --vp-c-purple-text: #c8abfa;
  --vp-c-purple-hover: #a879e6;
  --vp-c-purple-bg: #8e5cd9;
  --vp-c-purple-soft: rgb(159 122 234 / 16%);

  // green
  --vp-c-green-text: #3dd68c;
  --vp-c-green-hover: #30a46c;
  --vp-c-green-bg: #298459;
  --vp-c-green-soft: rgb(16 185 129 / 16%);

  // yellow
  --vp-c-yellow-text: #f9b44e;
  --vp-c-yellow-hover: #da8b17;
  --vp-c-yellow-bg: #a46a0a;
  --vp-c-yellow-soft: rgb(234 179 8 / 16%);

  // red
  --vp-c-red-text: #f66f81;
  --vp-c-red-hover: #f14158;
  --vp-c-red-bg: #b62a3c;
  --vp-c-red-soft: rgb(244 63 94 / 16%);
}
